<template>
  <a-modal class="induction_modal" v-model="visible" :title="title" :confirmLoading="submitLoading" width="1000px"
    ok-text="确认" cancel-text="取消" @ok="addFormSubmit">
    <a-form layout="inline" :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
      style="width: 100%;">
      <a-form-item label="姓名">
        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]" />
      </a-form-item>
      <a-form-item label="性别">
        <!-- <a-input v-decorator="['sex', { rules: [{ required: true, message: '请输入默认值' }] }]" /> -->
        <a-radio-group v-decorator="['sex', { rules: [{ required: true, message: '请选择性别' }] }]">
          <a-radio value="男">
            男
          </a-radio>
          <a-radio value="女">
            女
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="企业" v-if="userInfo.type == 4">
        <a-select v-model="enterpriseKey" @change="enterpriseChange" placeholder="选择企业" showSearch>
          <a-select-option v-for="item in enterpriseData" :key="item.key">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="手机号码">
        <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号' }] }]" />
      </a-form-item>
      <a-form-item label="组织分配">
        <!-- <a-input v-decorator="['orgIds', { rules: [{ required: true, message: '请输入默认值' }] }]" /> -->
        <div class="orgList" @click="$refs.orgTree.add(enterpriseId, treeKey, treeName)">
          <div v-if="treeName.length == 0">
            <span>请选择</span>
          </div>
          <div v-else>
            <span v-for="item, index in treeName" :key="index">{{ item }}，</span>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="身份证号">
        <a-input v-decorator="['idCard', { rules: [{ required: true, message: '请输入身份证号' }] }]" />
      </a-form-item>
      <a-form-item label="试用期">
        <a-select v-decorator="['month', { rules: [{ required: true, message: '请输入月份' }] }]"
          style="width: 120px;margin-right: 15px;" placeholder="选择月份">
          <a-select-option :key="0">
            无试用期
          </a-select-option>
          <a-select-option :key="1">
            一
          </a-select-option>
          <a-select-option :key="2">
            二
          </a-select-option>
          <a-select-option :key="3">
            三
          </a-select-option>
          <a-select-option :key="4">
            四
          </a-select-option>
          <a-select-option :key="5">
            五
          </a-select-option>
          <a-select-option :key="6">
            六
          </a-select-option>
        </a-select>
        个月
      </a-form-item>
      <a-form-item label="电签协议选择">
        <a-select v-model="pactTempId" style="width: 200px;" placeholder="协议模板" @change="templateChange"
          :disabled="staffId !== ''">
          <a-select-option v-for="item in templateData" :key="item.uniqueCode" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="入职日期">
        <a-date-picker valueFormat="YYYY-MM-DD"
          v-decorator="['entryDay', { rules: [{ required: true, message: '请选择日期' }] }]" />
      </a-form-item>
      <a-form-item label="合同开始日期">
        <a-date-picker valueFormat="YYYY-MM-DD"
          v-decorator="['pactStartDate', { rules: [{ required: true, message: '请选择日期' }] }]" />
      </a-form-item>
      <a-form-item label="合同结束日期">
        <a-date-picker valueFormat="YYYY-MM-DD"
          v-decorator="['pactEndDate', { rules: [{ required: true, message: '请选择日期' }] }]" />
      </a-form-item>
      <a-form-item label="住址">
        <a-input v-decorator="['address', { rules: [{ required: true, message: '请输入住址' }] }]" />
      </a-form-item>
      <a-form-item label="职位">
        <a-input v-decorator="['position', { rules: [{ required: true, message: '请输入职位' }] }]" />
      </a-form-item>
      <a-form-item label="户籍">
        <a-input v-decorator="['registeredResidence', { rules: [{ required: true, message: '请输入户籍' }] }]" />
      </a-form-item>
      <a-form-item label="户口性质">
        <a-select v-decorator="['resident', { rules: [{ required: true, message: '请选择户口性质' }] }]" placeholder="选择户口性质">
          <a-select-option key="城镇">
            城镇
          </a-select-option>
          <a-select-option key="农村">
            农村
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="民族">
        <a-input v-decorator="['nation', { rules: [{ required: true, message: '请输入民族' }] }]" />
      </a-form-item>
      <a-form-item label="教育程度">
        <a-select v-decorator="['educationLevel', { rules: [{ required: true, message: '请选择教育程度' }] }]"
          placeholder="选择教育程度">
          <a-select-option key="小学">
            小学
          </a-select-option>
          <a-select-option key="初中">
            初中
          </a-select-option>
          <a-select-option key="高中">
            高中
          </a-select-option>
          <a-select-option key="中专">
            中专
          </a-select-option>
          <a-select-option key="大专">
            大专
          </a-select-option>
          <a-select-option key="本科">
            本科
          </a-select-option>
          <a-select-option key="硕士研究生">
            硕士研究生
          </a-select-option>
          <a-select-option key="博士研究生">
            博士研究生
          </a-select-option>
        </a-select>
      </a-form-item><br />
      <a-form-item label="残疾人">
        <a-radio-group v-model="disabled" @change="radioDisabled">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <div v-if="disabled == 1">
        <a-form-item label="残疾人编号">
          <a-input v-decorator="['disabledNumber', { rules: [{ required: true, message: '请输入残疾人编号' }] }]" />
        </a-form-item>
        <a-form-item label="残疾类别">
          <a-select v-decorator="['disabledCategory', { rules: [{ required: true, message: '请选择残疾类别' }] }]"
            placeholder="选择残疾类别">
            <a-select-option :key="1">
              视力残疾
            </a-select-option>
            <a-select-option :key="2">
              听力残疾
            </a-select-option>
            <a-select-option :key="3">
              言语残疾
            </a-select-option>
            <a-select-option :key="4">
              肢体残疾
            </a-select-option>
            <a-select-option :key="5">
              智力残疾
            </a-select-option>
            <a-select-option :key="6">
              精神残疾
            </a-select-option>
            <a-select-option :key="7">
              多重残疾
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="残疾等级">
          <a-select v-decorator="['disabledLeave', { rules: [{ required: true, message: '请选择残疾等级' }] }]"
            placeholder="选择残疾等级">
            <a-select-option :key="1">
              第一级
            </a-select-option>
            <a-select-option :key="2">
              第二级
            </a-select-option>
            <a-select-option :key="3">
              第三级
            </a-select-option>
            <a-select-option :key="4">
              第四级
            </a-select-option>
          </a-select>
        </a-form-item>
      </div>
    </a-form>
    <!-- 企业组织 -->
    <org-tree ref="orgTree" @on-tree="treeCall"></org-tree>
    <!-- 身份证验证是否重复 -->
    <a-modal title="操作确认" v-model="isRepeat" @ok="lastFormSubmit">
      <p>{{ events_form.getFieldValue('idCard') }} 该人员已存在是否继续添加，添加后人员信息将被覆盖？</p>
    </a-modal>
  </a-modal>
</template>

<script>

import store from '@/store'
import OrgTree from "@/components/human/orgTree.vue"
import { mapGetters, mapActions } from 'vuex'
import {
  enterprisePactTemplate,
  enterpriseStaffInfo,
  addStaff,
  editStaff,
  queryEnterpriseStaffByIdCard
} from "@/api/human/relationInduction"
export default {
  name: 'AddInfo',
  components: {
    OrgTree
  },
  data() {
    return {
      title: "",
      visible: false,
      staffId: "",
      staffInfo: {},
      submitLoading: false,

      enterpriseKey: "", // 企业唯一key
      enterpriseId: "", // 企业id
      enterpriseData: [], // 企业列表
      disabled: 0,
      pactTempId: "",
      pactTempName: "",
      templateData: [], // 协议模板

      treeName: [],
      treeKey: [],
      initIdCard: "", // 初始化身份证号
      isRepeat: false, // 是否重复
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(rows, enterpriseId, templateData) {
      this.title = rows === true ? '新增员工' : '编辑员工';
      this.visible = true;
      this.treeName = [];
      this.treeKey = [];
      if (this.userInfo.type == 4) {
        // hr管理端
        this.getEnterpriseData(enterpriseId);
      } else if (this.userInfo.type == 5) {
        // hr企业端
        this.enterpriseId = enterpriseId;
        this.templateData = templateData;
      }
      if (rows === true) {
        this.staffId = "";
        this.initIdCard = "";
        this.pactTempId = "";
        this.pactTempName = "";
        this.disabled = 0;
        // 新增
        this.$nextTick(() => {
          this.events_form.resetFields();
        })
      } else {
        this.staffId = rows.staffId
        // 修改
        let { code, data } = await enterpriseStaffInfo({ enterpriseId: enterpriseId, idCard: rows.idCard })
        let values = this.events_form.getFieldsValue();
        if (code == '1') {
          this.staffInfo = data;
          for (var key in data) {
            values[key] = data[key]
          }
          this.disabled = data['disabled'];
          this.enterpriseId = data['enterpriseId'];
          this.initIdCard = data['idCard']
          this.pactTempId = data['pactTempId']
          this.pactTempName = data['pactTempName']
          if (data['orgList'].length > 0) {
            data.orgList.forEach(item => {
              this.treeName.push(item.orgName)
              this.treeKey.push(item.orgId)
            })
          }
          this.$nextTick(()=>{
            this.events_form.setFieldsValue(values);
          })
        }
      }
    },
    // 是否为残疾人回调
    radioDisabled(e) {
      let val = e.target.value;
      if (val == 1) {
        this.$nextTick(()=>{
          this.events_form.setFieldsValue({
            disabledNumber: this.staffInfo.disabledNumber,
            disabledCategory: this.staffInfo.disabledCategory,
            disabledLeave: this.staffInfo.disabledLeave
          });
        })
      }
    },
    // 获取客户员工
    async getEnterpriseData(id) {
      this.enterpriseData = await store.dispatch('department/getAllEnterprise');
      this.enterpriseData.forEach(item => {
        item.key = item.name + ',' + item.enterpriseId
      })
      if (id) {
        this.enterpriseId = id;
        this.enterpriseKey = this.enterpriseData.filter(item => item.enterpriseId == id)[0].key;
      } else {
        this.enterpriseId = this.enterpriseData[0].enterpriseId;
        this.enterpriseKey = this.enterpriseData[0].key;
      }
      this.getTemplateData();
    },
    // 选择客户
    enterpriseChange(value) {
      this.enterpriseKey = value;
      this.enterpriseId = value.match(/,(\S*)/)[1];
      this.getTemplateData();
    },
    // 选择模板
    templateChange(value, option) {
      this.pactTempId = value
      this.pactTempName = option.data.attrs.name
    },
    // 获取签约模板列表
    async getTemplateData() {
      this.templateData = [];
      let { code, data } = await enterprisePactTemplate({ enterpriseId: this.enterpriseId });
      if (code == 1) {
        if (data) {
          this.templateData = data
        }
      }
    },
    // 组织结构回调
    treeCall(info) {
      // console.log(info);
      if (info.name.length > 0) {
        this.treeName = info.name
        this.treeKey = info.key
      } else {
        this.treeName = []
        this.treeKey = []
      }
    },
    // 判断员工是否重复添加
    async getRepeatAdd() {
      let params = {
        enterpriseId: this.enterpriseId,
        idCard: this.events_form.getFieldValue('idCard') || ''
      }
      let { code, data } = await queryEnterpriseStaffByIdCard(params);
      if (code == 1) {
        if (data == null) {
          this.lastFormSubmit();
        } else {
          this.isRepeat = true;
        }
      }
    },
    addFormSubmit() {
      const that = this;
      // console.log(this.events_form.getFieldsValue());
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (that.initIdCard == values.idCard) {
            that.lastFormSubmit()
          } else {
            that.getRepeatAdd();
          }
        }
      });
    },
    async lastFormSubmit() {
      let values = this.events_form.getFieldsValue()
      values.enterpriseId = this.enterpriseId;
      values.orgIds = this.treeKey;
      values.staffId = this.staffId;
      values.pactTempId = this.pactTempId;
      values.pactTempName = this.pactTempName;
      values.disabled = this.disabled;
      this.submitLoading = true;
      // console.log(values);
      const {
        code
      } = this.staffId ? await editStaff(values) : await addStaff(values);
      this.submitLoading = false;
      if (code === '1') {
        this.visible = false;
        this.isRepeat = false;
        this.$message.success('操作成功');
        this.$emit('on-ok');
      }
    },
  }
}
</script>
<style lang="less">
.induction_modal {
  .ant-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .orgList {
    width: 100%;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 6px 11px;
    line-height: 1.5;
    box-sizing: border-box;
    cursor: pointer;
  }
}
</style>
